<template>
	<view>
		<view class="action action_btn">
			<view class="action_btn_top">
				{{detailsName}}
			</view>
			<view class="">
				<button class="cutn round bg-green shadow" @tap="emptyShoppingCarts">关闭</button>
			</view>
		</view>
		<scroll-view class="VerticalNav bagcolor scrolls" scroll-y scroll-with-animation :scroll-top="verticalNavTop">
			<view class="cu-bar bg-white">
				<view class="action">
					<text class="cuIcon-title text-orange"></text>
					<text>荤菜(任选{{meatNumber}}份)</text>

				</view>
			</view>
			<view class="cu-list menu-avatar" v-for="(item,index) in meatDishesx" :key="index" v-if="item.itemType == 1">
				<view class="cu-item cur">
					<view class="cu-avatar radius lgs">
						<!-- <view class="cuag badge"></view> -->
						<image  @click="clickImg(htp + item.itemImg)" class="imgs" :src=" htp + item.itemImg " mode=""></image>
					</view>
					<view class="content">
						<view>
							<text class="text-cut">{{item.itemName}}</text>
							<view class="cu-tag round bg-orange sm">荤菜</view>
						</view>
						<view class="text-gray text-sm flex">
							<!-- <text class="text-red">{{item.number}}</text> -->
						</view>
						<view class="text-gray text-sm flex">
							<!-- <text class="text-red">{{item.number}}</text> -->
						</view>
					</view>
					<view class="action">
						<view class="action">
							<view class="action_number">
								<button class="bg_border cu-btn  lg textbtn add" @tap="addTo(item.number,index,item.id,item.itemType,1)">-</button>
								<view class="action_text">
									<text v-if="item.number >= 1">{{item.number}}</text>
									<text v-else>0</text>
								</view>
								<button class="bg-green cu-btn  lg textbtn add" @tap="addTo(item.number,index,item.id,item.itemType,2)">+</button>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="cu-bar bg-white">
				<view class="action">
					<text class="cuIcon-title text-orange"></text>
					<text>素菜(任选{{elementNumber}}份)</text>
				</view>
			</view>
			<view class="cu-list menu-avatar" v-for="(item,index) in meatDishesx" :key="index" v-if="item.itemType == 2">
				<view class="cu-item cur">
					<view class="cu-avatar radius lgs">
						<!-- <view class="cu-tag badge"></view> -->
						<image @click="clickImg(htp + item.itemImg)" class="imgs" :src=" htp + item.itemImg " mode=""></image>
					</view>
					<view class="content">
						<view>
							<text class="text-cut">{{item.itemName}}</text>
							<view class="cu-tag round bg-orange sm">素菜</view>
						</view>
						<view class="text-gray text-sm flex">
							<!-- <text class="text-red">{{item.number}}</text> -->
						</view>
						<view class="text-gray text-sm flex">
							<!-- <text class="text-red">{{item.number}}</text> -->
						</view>
					</view>
					<view class="action">
						<view class="action">
							<view class="action_number">
								<button class="bg_border cu-btn  lg textbtn add" @tap="addTo(item.number,index,item.id,item.itemType,1)">-</button>
								<view class="action_text">
									<text v-if="item.number >= 1">{{item.number}}</text>
									<text v-else>0</text>
								</view>
								<button class="bg-green cu-btn  lg textbtn add" @tap="addTo(item.number,index,item.id,item.itemType,2)">+</button>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="cu-bar bg-white">
				<view class="action">
					<text class="cuIcon-title text-orange"></text>
					<text>主食(任选一份，超出的按单点计算)</text>
				</view>
			</view>
			<view class="cu-list menu-avatar" v-for="(item,index) in stapleFoods" :key="index">
				<view class="cu-item cur">
					<view class="cu-avatar radius lgs">
						<!-- <view class="cu-tag badge"></view> -->
						<image  @click="clickImg(htp + item.itemImg)" class="imgs" :src=" htp + item.itemImg " mode=""></image>
					</view>
					<view class="content">
						<view>
							<text class="text-cut">{{item.itemName}}</text>
							<view class="cu-tag round bg-orange sm">主食</view>
						</view>
						<view class="text-gray text-sm flex">
							<!-- <text class="text-red">{{item.number}}</text> -->
						</view>
						<view class="text-gray text-sm flex">
							<!-- <text class="text-red">{{item.number}}</text> -->
						</view>
					</view>
					<view class="action">
						<view class="action">
							<view class="action_number">
								<button class="bg_border cu-btn  lg textbtn add" @tap="foodTo(item.number,index,item.id,item.itemType,item.itemName,item.itemPrice,1)">-</button>
								<view class="action_text">
									<text v-if="item.number >= 1">{{item.number}}</text>
									<text v-else>0</text>
								</view>
								<button class="bg-green cu-btn  lg textbtn add" @tap="foodTo(item.number,index,item.id,item.itemType,item.itemName,item.itemPrice,2)">+</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="action action_btns">
			<button class="cutn round bg-green shadow" @tap="emptyShoppingCart">加入购物车</button>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'PackageDetails',
		//主食       //荤菜        //价格        //全部信息						//素菜数量      	//荤菜数量		//套餐名称  //时间区间
		props: ['stapleFood', 'meatDishes', 'PackagePrice', 'details', 'idx', 'elementNumber', 'meatNumber', 'mealName',
			'itemRanges', 'detailsName','reserveState'

		],
		watch: {
			// stapleFood: {
			// 	handler(newName, oldName) {
			// 		this.stapleFoodt = newvalue
			// 		this.stapleFoods = newvalue
			// 		this.inf()
			// 	},
			// 	immediate: true
			// },
			meatDishes: {
				handler(newName, oldName) {
					this.meatDishesx = newName
					this.inf()
				},
				immediate: true
			}


			// meatDishes(newvalue, oldvalue) {
			// 	this.meatDishesx = newvalue

			// },
		},
		data() {
			return {
				element: [],
				meat: [],
				stapleFoodsin: null,
				foodides: null,
				Set_meal: [], //套餐信息
				Set_food_rice: [], //米饭
				Set_food: [], //套餐主食信息
				number: 1,
				PackagePrices: null, //主食价格
				foodsName: null,
				stapleFoodt: null,
				stapleFoodin: null,
				ifFood: 2, //是否要主食
				foodsid: null, //菜品id
				stapleFoods: null,
				meatDishesx: null,
				id: null,
				consult: null,
				typelenges: null,
				numbernum: 0, //主食数量			
				cartBasketRect: {}, //购物车位置数据
				openids: null, //openids
				xinxi: null, //信息
				modalName: null,
				radio: 'radio1',
				id: null,
				htp: 'https://www.iotry.net/',
			};
		},
		beforeCreate() {
			// console.log('组件初始化,未完全创建阶段')
		},
		created() {
			// console.log('组件创建后，但还未挂载')					
		},
		beforeMount() {
			// console.log('渲染后待挂载')
		},
		mounted() {
			// console.log('组件挂载到页面OK,可用 vm.$el 访问')
			this.openid()
			this.selecFoodList()
		},
		beforeUpdate() {
			// console.log('再次渲染前')

		},
		updated() {
			// console.log('再次渲染后')
		},
		activated() {
			// console.log('当前组件被激活：显示')
		},
		deactivated() {
			// console.log('当前组件隐藏')
		},
		beforeDestroy() {
			// console.log('销毁前')
		},
		destroy() {
			// console.log('销毁后')

		},
		methods: {
			//图片放大
			clickImg(img) {
				wx.previewImage({
					urls: [img], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: '', // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			//主食信息
			selecFoodList() {
				this.request.selecFoodList({
				}).then(res => {
					this.stapleFoods = res
				})
			},
			//列表详情
			selectTable() {
				this.request.selectTable({
					itemRange: this.classCode,
				}).then(res => {
					this.pageContent = res
					let itemRange = res.rows.map((item) => {
						this.itemRange = item.itemRange
					})
				})
			},
			openid() {
				const openid = uni.getStorageSync('user');
				this.openids = openid
			},
			addShopping() {
				let primaryMoney = this.PackagePrice;
				let timeType = this.itemRanges
				let openId = this.openids;
				let foodId = this.foodsid;
				let number = this.number
				let consult = this.consult
				let money = this.PackagePrice //金额
				let ifFood = this.ifFood
				let lists = {
					"primaryMoney": primaryMoney,
					"timeType": timeType,
					"mealName": this.mealName,
					"state": 1,
					"oppenId": openId,
					"foodId": foodId,
					"number": number,
					"consult": consult,
					"money": money,
					"ifFood": ifFood
				}
				let list = JSON.stringify(lists)
				this.request.addShop(
					list
				).then(res => {
					this.$parent.selectQueryRestItem()
					this.$parent.selectShoppingCat()
					this.Set_meal = []
				})
			},
			//主食购物车
			addShoppings() {
				let primaryMoney = this.PackagePrices; //原价
				let timeType = this.itemRanges;
				let openId = this.openids;
				let foodId = this.foodsid;
				let number = this.numbernum;
				let consult = this.consult;
				let money = this.PackagePrices; //金额
				let ifFood = this.ifFood;
				let lists = {
					"primaryMoney": primaryMoney,
					"timeType": timeType,
					"mealName": this.foodsName,
					"state": 2,
					"oppenId": openId,
					"foodId": foodId,
					"number": number,
					"consult": consult,
					"money": money,
					"ifFood": ifFood
				}
				let list = JSON.stringify(lists)
				this.request.addShop(
					list
				).then(res => {
					this.$parent.selectShoppingCat()
					this.$parent.TodaysDishesID()
				})
			},
			//荤素加减
			shopping(id) {
				let mae = null;
				let max = null;
				if (typeof(id) == "number") {
					max = this.Set_meal.filter(item => {
						return item == id
					})
					if (max.length >= 1) {
						mae = max.forEach((item, index, arr) => {
							max = item
						})
					}
				}
				if (id == max) {
					let Set_mealvalue = this.Set_meal.lastIndexOf(id);
					if (Set_mealvalue !== '-1') {
						this.Set_meal.splice(Set_mealvalue, 1)
					}

				} else {
					return false
				}
			},
			//主食加减
			shoppingFood(id, type, itemName) {
				if (itemName == '不要主食' && type == 1) {
					this.Set_food = []
					this.Set_food.push(id)
					return false
				}
				if (id && type == 2) {
					let Set_mealvalue = this.Set_food.lastIndexOf(id);
					if (Set_mealvalue != '-1') {
						this.Set_food.splice(Set_mealvalue, 1)
					}
				} else {
					return false
				}
			},
			//查找数组相同的数
			getArrDifference(arr1, arr2) {
				let aaa = arr1.concat(arr2).filter(function(v, i, arr) {
					return arr.indexOf(v) == arr.lastIndexOf(v);
				});
				let foodides = aaa.find(item => {
					return item
				})
				this.foodides = foodides
			},
			inf() {},
			//关闭
			emptyShoppingCarts() {
				this.$emit('shuts', null)
				this.$parent.selectQueryRestItem()

			},
			// 主食
			selecFoodLists(SetfoodRice, type) {
				let nunn = '';
				let numm = '';
				if (type == 1) {
					nunn = this.stapleFoods.filter(item => {
						return item.number >= 1 && item.id != SetfoodRice
					})
					numm = this.stapleFoods.filter(item => {
						return item.number >= 1 && item.id == SetfoodRice
					})
				} else {
					let numbers = SetfoodRice.toString();
					numbers = SetfoodRice.slice(-1)
					nunn = this.stapleFoods.filter(item => {
						return item.number >= 1 && item.id != numbers
					})
					numm = this.stapleFoods.filter(item => {
						return item.number >= 1 && item.id == numbers
					})
				}

				for (var i = 0; i < nunn.length; i++) {
					let numbernum = nunn[i].number
					let foodsName = nunn[i].itemName
					let PackagePrices = nunn[i].itemPrice
					let foodsid = nunn[i].id
					this.ifFood = 2
					this.numbernum = numbernum
					this.consult = 1
					this.foodsName = foodsName
					this.PackagePrices = PackagePrices
					this.foodsid = foodsid
					this.addShoppings()
				}
				for (var i = 0; i < numm.length; i++) {
					let numbernum = numm[i].number - 1
					let foodsName = numm[i].itemName
					let PackagePrices = numm[i].itemPrice
					let foodsid = numm[i].id
					if (numbernum == 0) {
						return false
					}
					this.ifFood = 2
					this.numbernum = numbernum
					this.consult = 1
					this.foodsName = foodsName
					this.PackagePrices = PackagePrices
					this.foodsid = foodsid
					this.addShoppings()
				}


			},
			//提交购物车
			emptyShoppingCart() {
				let Set_food_rice = '';
				let SetfoodRice = '';
				let Set_foods = '';
				//是否添加主食
				if (this.Set_food.length == 0) {
					uni.showToast({
						icon: 'none',
						title: '您还没有添加主食',
					});
					return false
				}
				if (this.meat.length < this.meatNumber) {
					uni.showToast({
						icon: 'none',
						title: '荤菜份数不够',
					});
					return false
				}
				if (this.element.length < this.elementNumber) {
					uni.showToast({
						icon: 'none',
						title: '素菜份数不够',
					});
					return false
				}
				let arr_sel = [];
				Set_food_rice = this.Set_food.filter(item => {
					return item == 197
				})
				if (Set_food_rice != '') {
					Set_foods = [];
					Set_foods = [197]
					this.selecFoodLists(197, 1)
				} else {
					SetfoodRice = this.Set_food.slice(-1);
					Set_foods = this.Set_food.slice(-1);
					this.selecFoodLists(SetfoodRice, 2)
				}
				let arr = Set_foods.concat(this.Set_meal).filter(function(v, i, arr) {
					return arr
				});
				let foodId = this.idx
				this.$emit('shuts', null)
				arr_sel = arr.toString()
				this.foodsid = arr_sel
				this.consult = 1
				this.addShopping()
			},
			// 1减   2加
			addTo(number, index, id, itemtype, type) {
				let numm = []
				this.id = id
				let foot = this.meatDishesx[index];
				let resultA = this.meatDishesx.filter(item => item.itemType == 1); //荤菜
				let resultB = this.meatDishesx.filter(item => item.itemType == 2); //素菜							
				let emNumber = this.elementNumber + this.meatNumber
				for (var i = 0; i < this.meatDishesx.length; i++) {
					if (this.meatDishesx[i]["number"] > 0) {
						numm.push(this.meatDishesx[i]);
					}
				}
				let resultC = numm.filter(item => item.itemType == 2); //素菜	
				let resultD = numm.filter(item => item.itemType == 1); //荤菜
				//素菜数量
				let resultE = resultC.map(item => {
					return item.number
				})
				//素菜数量之和
				let nuxArr = resultE.reduce((preVal, curVal) => {
					return Number(preVal) + Number(curVal)
				}, [])
				if (type == 2) {
					if (itemtype == 1 && resultD.length < this.meatNumber && foot["number"] < 1) {
						foot["number"] = foot["number"] + Number(1)
						this.Set_meal.push(id)
						this.meat.push(id)
					} else {

					}
					if (itemtype == 2 && nuxArr < this.elementNumber) {
						foot["number"] = foot["number"] + Number(1)
						this.Set_meal.push(id)
						this.element.push(id)
					} else {

					}

				} else if (type == 1 && foot["number"] > 0) {
					foot["number"] = foot["number"] - Number(1)
					this.shopping(id)
					let meatMap = this.meat.filter(item => {
						return item == id
					})
					let elementMap = this.element.filter(item => {
						return item == id
					})
					let meat = this.meat
					let element = this.element
					if (meatMap != '') {
						let indexM = meat.indexOf(id);
						meat.splice(indexM, 1)
					}
					if (elementMap != '') {
						let indexE = element.indexOf(id);
						element.splice(indexE, 1)
					}

				}
			},
			foodTo(number, index, id, itemtype, itemName, PackagePrice, type) {
				var assayMethadArry = new Map;
				let fots = this.stapleFoods[index];
				let nunn = []
				for (var i = 0; i < this.stapleFoods.length; i++) {
					if (this.stapleFoods[i]["number"] >= 1) {
						nunn.push(this.stapleFoods[i]);
					}
				}
				let resultF = nunn.filter(item => item.itemType == 5);
				//主食
				let resultG = resultF.map(item => {
					return item.number
				})
				//主食之和
				// let nufArr = resultG.reduce((preVal, curVal) => {
				// 	return Number(preVal) + Number(curVal)
				// }, [])
				if (type == 2 && itemtype == 5) {
					//不要主食
					if (itemName == "不要主食") {
						this.Set_food.push(id)
						this.ifFood = 1
						let stapleFoods = this.stapleFoods.filter((item) => {
							return item.itemName == "不要主食"
						})
						this.stapleFoods = stapleFoods
						fots["number"] = 1
						this.shoppingFood(id, 1, itemName)
						return false
					}
					fots["number"] = fots["number"] + Number(1)
					this.Set_food.push(id)
					this.Set_food.filter(item => {
						assayMethadArry.set(item, 0)
					})
					this.Set_food = []
					assayMethadArry.forEach((value, key) => {
						this.Set_food.push(key)
					})
					//超出规格后
					if (fots["number"] > 1 || nunn.length >= 1) {
						uni.showToast({
							title: '超出套餐规格按单点计算',
							duration: 1000
						});
					}
					//主食减
				} else if (type == 1 && fots["number"] > 0) {
					if (itemName == "不要主食") {
						this.ifFood = 2
						this.selecFoodList()
						this.stapleFoods = this.stapleFoodsin
					}
					fots["number"] = fots["number"] - Number(1)

					if (fots["number"] < 1) {
						this.shoppingFood(id, 2, itemName)
					}
				}

			}
		},
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}

	image {
		border-radius: 12rpx;
	}

	/* #ifdef H5 || MP-WEIXIN */
	.scrolls {
		height: calc(100vh - 237upx)
	}

	.cu-list.menu-avatar>.cu-item .content {
		position: absolute;
		left: 252rpx;
		width: calc(100% - 220rpx - 60rpx - 120rpx - 20rpx);
		line-height: 1.6em;
	}

	/* #endif */
	.content {
		font-size: 34rpx;
	}

	.action_btn_top {
		font-size: 36rpx;
		font-weight: bold;
		margin-left: 40rpx;
	}

	.lgs {
		width: 200rpx;
		height: 130rpx;
	}

	.cu-btn.lg {
		padding: 0;
		height: 50rpx;
		width: 50rpx;
	}

	.padding {
		padding: 0 15rpx 10rpx 15rpx;
	}

	.padding_box {
		padding: 10rpx;
	}

	.botm {
		z-index: 999;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.textbtn {
		border-radius: 12rpx;
		width: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
	}

	.imgs {
		height: 129rpx;
	}

	.cu-avatar {
		background-color: #FFFFFF;
	}

	.add:active {
		transform: scale(1.2);
	}

	.action_number {
		display: flex;
		width: 190rpx;
		position: absolute;
		top: 72rpx;
		justify-content: space-around;
		right: 20rpx;
	}

	.action_text {
		line-height: 50rpx;
	}

	.bg_border {
		color: #39b54a;
		background-color: #ffffff;
		border: 1rpx solid #39b54a;
	}

	.flex {
		height: 42rpx;
	}

	.cu-bar.tabbar.shop .action {
		width: 250rpx;
	}

	.cu-list.menu-avatar>.cu-item .action {
		width: 150rpx;
	}

	.cu-list.menu-avatar>.cu-item .action[data-v-bfd085f4] {
		width: 144rpx;
	}

	.action_body {
		height: 70rpx;
		font-size: 35rpx;
		line-height: 70rpx;
		border-bottom: 1rpx solid #F2F2F2;
	}

	.cutn {
		padding: 10rpx;
		height: 49rpx;
		width: 204rpx;
		border-radius: 10rpx;
		font-size: 15px;
		line-height: 30rpx;
		border-radius: 10rpx;
	}

	button {
		margin: 0;
		padding: 0;
		outline: none;
		border-radius: 0;
		background-color: transparent;
		line-height: inherit;
		width: max-content;
	}

	button:after {
		border: none;
	}

	.action_btn {
		margin: 20rpx 0;
		display: flex;
		justify-content: space-between;
		padding-right: 35rpx;
	}

	.action_btns {
		margin: 20rpx 0;
		display: flex;
		justify-content: flex-end;
		padding-right: 35rpx;
	}

	.VerticalNav.nav {
		width: 100%;
		white-space: initial;
	}

	.VerticalNav.nav .cu-item {
		width: 100%;
		text-align: center;

		margin: 0;
		border: none;
		height: 180rpx;
		position: relative;
	}

	.VerticalNav.nav .cu-item.cur::after {
		content: "";
		width: 8upx;
		height: 30upx;
		border-radius: 10upx 0 0 10upx;
		position: absolute;
		background-color: currentColor;
		top: 0;
		right: 0upx;
		bottom: 0;
		margin: auto;
	}

	.VerticalBox {
		display: flex;
	}

	.VerticalMain {
		flex: 1;
	}
</style>
